//console.log("index");
// 英雄 玩家 皮肤  技能 、游戏管理 ---》类 ---》逻辑关系--》组织代码；
/*
        game {
            login{
              player:{
                heros:{
                    skills
                    skins
                }
              }
            }
        }
*/
// index.js  和dom操作相关内容
import Game from './game/game.js';
let game = new Game();

document.querySelector(".sub").onclick = function () {
  let username = document.querySelector(".username").value;
  game.login(username);//获取到玩家和对应的英雄等信息,new所有的东西出来
  document.querySelector(".login").style.display = "none";
  document.querySelector(".game").style.display = "block";

  document.querySelector(".chioseusername").innerHTML = username
  //渲染英雄
  renderHeroes(game.player.heroes)
}

  

//   //英雄点击高亮(默认亚瑟)，中部skinShow切换
//   // heroItems = document.querySelectorAll(".heroItem")
//   // heroItems.forEach((item)=>{
//   //   item.onclick = function(e){
//   //     //通过名字找英雄实例
//   //     let hero = game.player.heroes.find((item1)=>{
//   //       return item1.name === item.querySelector("span").innerText
//   //     })
//   //     console.log(hero)
//   //     skinShowImg.src = hero.skins[0]
      
//   //     let imgs = herosView.querySelectorAll("img")
//   //     imgs.forEach((every)=>{
//   //       if(every.className='selected'){
//   //         every.className = ''
//   //       }
//   //     })
//   //     item.querySelector("img").className = 'selected'
//   //   }
//   // })


function renderHeroes(heroes){
  document.querySelector(".heroView").innerHTML = ''
  heroes.forEach(hero=>{
    let heroItem = document.createElement('div')
    heroItem.classList.add('heroItem')
    heroItem.innerHTML = `<img src="${hero.ico}" />
    <span>${hero.name}</span>`
    heroItem.onclick = function(){
     //高亮显示
      document.querySelectorAll(".heroView img").forEach(item=>{
        item.className = ''
      })
      heroItem.querySelector('img').classList.add("selected")
     //选中英雄
      document.querySelector(".heroShow").innerHTML = `<img src="${hero.ico}">`
     //渲染英雄技能
      renderSkills(hero.skills)
      //更新隐藏的皮肤
      console.log(hero.skins)
      renderSkins(hero.skins)
    }
    document.querySelector(".heroView").appendChild(heroItem)
  })
}

//渲染技能
function renderSkills(skills){
  document.querySelector(".skillsView").innerHTML = ''
  skills.forEach(skill=>{
    let img = document.createElement("img")
    img.src = skill.ico
    document.querySelector(".skillsView").appendChild(img)
  })
}

//更新皮肤
function renderSkins(skins){
  document.querySelector(".skinView").innerHTML = ''
  skins.forEach(skin => {
    let skinItem = document.createElement("div")
    skinItem.classList.add("skinItem")
    skinItem.innerHTML = `<img src="${skin.ico}" />
    <span>${skin.name}</span>`
    skinItem.onclick = function(){
      document.querySelector(".skinShow img").src = skin.skinShow
    }
    document.querySelector(".skinView").appendChild(skinItem)
  })
}

document.querySelector(".skinBtn").onclick = function(){
  document.querySelector(".skinContainer").style.display = "block"
  document.querySelector(".heroContainer").style.display = "none"
}

document.querySelector(".heroBtn").onclick = function(){
  document.querySelector(".skinContainer").style.display = "none"
  document.querySelector(".heroContainer").style.display = "block"
}
// document.querySelector(".skinBtn").onclick = function () {
//   //渲染皮肤
//   skinView.innerHTML = ''
//   heroSelected.skins.forEach((item)=>{
//     let skinItem = document.createElement('div')
//       skinItem.className = 'skinItem'
//       skinItem.innerHTML = `<img src=${item.heroUrl} />
//     <span>${item.skinName}</span>`
//     skinView.appendChild(skinItem)
//   })
//   skinContainer.style.display = "block";
//   heroContainer.style.display = "none"
